import React from 'react'
import { connect } from 'react-redux'
import { Form, Row, Col, Input, Select } from 'antd'
import { accountRoleArr, accountStatusArr } from 'common/js/module'
import { telphoneValid, mobphoneValid } from 'common/js/rules'

const FormItem = Form.Item
const Option = Select.Option
const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 17 }
}

const Forms = (props) => {
  const { formData } = props
  const { getFieldDecorator } = props.form

  return (
    <Form layout="horizontal">
      <Row>
        <Col span="12">
          <FormItem
            label="账户名"
            {...formItemLayout}
          >
            {
              getFieldDecorator('userName', {
                rules: [{ required: true, message: '账户名不能为空' }],
                initialValue: formData.userName
              })(
                <Input placeholder="请输入账户名" />
              )
            }
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem
            label="账户角色"
            {...formItemLayout}
          >
            {
              getFieldDecorator('role', {
                rules: [{ required: true, message: '账户角色不能为空' }],
                initialValue: formData.role
              })(
                <Select placeholder="请选择账户角色">
                  {
                    accountRoleArr.map(item => (
                      <Option key={item.key} value={item.key}>{item.value}</Option>
                    ))
                  }
                </Select>
              )
            }
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem
            label="账户手机"
            {...formItemLayout}
          >
            {
              getFieldDecorator('phone', {
                rules: [
                  { required: true, message: '账户手机不能为空' },
                  { validator: telphoneValid }
                ],
                initialValue: formData.phone
              })(
                <Input placeholder="请输入账户手机" />
              )
            }
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem
            label="电子邮箱"
            {...formItemLayout}
          >
            {
              getFieldDecorator('email', {
                initialValue: formData.email
              })(
                <Input placeholder="请填写电子邮箱" />
              )
            }
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem
            label="商户名字"
            {...formItemLayout}
          >
            {
              getFieldDecorator('businessName', {
                rules: [{ required: true, message: '商户名字不能为空' }],
                initialValue: formData.businessName
              })(
                <Input placeholder="请填写商户名字" />
              )
            }
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem
            label="商户地址"
            {...formItemLayout}
          >
            {
              getFieldDecorator('address', {
                initialValue: formData.address
              })(
                <Input placeholder="请填写商户地址" />
              )
            }
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem
            label="商户座机"
            {...formItemLayout}
          >
            {
              getFieldDecorator('telephone', {
                rules: [{ validator: mobphoneValid }],
                initialValue: formData.telephone
              })(
                <Input placeholder="请填写商户座机" />
              )
            }
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem
            label="商户传真"
            {...formItemLayout}
          >
            {
              getFieldDecorator('fox', {
                rules: [{ validator: mobphoneValid }],
                initialValue: formData.fox
              })(
                <Input placeholder="请填写商户传真" />
              )
            }
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem
            label="是否启用"
            {...formItemLayout}
          >
            {
              getFieldDecorator('status', {
                rules: [{ required: true, message: '启用状态不能为空' }],
                initialValue: formData.status
              })(
                <Select placeholder="请选择启用状态">
                  {
                    accountStatusArr.map(item => (
                      <Option key={item.key} value={item.key}>{item.value}</Option>
                    ))
                  }
                </Select>
              )
            }
          </FormItem>
        </Col>
      </Row>
    </Form>
  )
}

const WrapperForm = Form.create()(Forms)

const mapState = (state) => ({
  formData: state.getIn(['account', 'formData'])
})

export default connect(mapState, null, null, {withRef: true})(WrapperForm)
